import React from 'react';
import { observer, inject } from 'mobx-react';

import { Table, Divider,Pagination  } from 'antd';

const { Column } = Table;

import './index.scss';

import UserApi from '@service/UserApi';

class ListView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userList: []
        };

        this.UserList();
    }

    async  UserList() {
        var resultData = await UserApi.UserList();
        console.log(resultData, "===========resultData=============");
        this.setState({
            userList: resultData || []
        });

    }


    render() {
        return (
            <Table dataSource={this.state.userList} size="middle" bordered
                title={() => 'Header'}
                footer={() => <Pagination defaultCurrent={1} total={50} />}
                expandedRowRender={record => <p style={{ margin: 0 }}>地址: {record.address}</p>}
            >
                <Column title="uuid" dataIndex="uuid" key="uuid" />
                <Column title="name" dataIndex="name" key="name" />
                <Column title="age" dataIndex="age" key="age" />
                <Column
                    title="sex"
                    key="sex"
                    render={(text, record) => (
                        <span>
                            {record.sex == 0 ? '女' : '男'}
                        </span>
                    )}
                />
                <Column
                    width={150}
                    title="sex"
                    key="sex"
                    render={(text, record) => (
                        <span>
                            <a>删除</a>
                            <Divider type="vertical" />
                            <a>编辑</a>
                        </span>
                    )}
                />
            </Table>
        );
    }
}
export default ListView;